<template>
  <div class="sample_form">
    <div class="form_config">
      <h2>表单配置</h2>
      <elme-form
        labelCol="120px"
        :formData="formConfig"
        :formValue="formConfigValue"
        :formButton="null"
        size="small" 
      />
      <div class="generate_btn">
        <el-button type="primary" @click="generateFun">生成表单代码</el-button>
        <p>注：复制的代码请在页面格式化。</p>
      </div>
      <div class="html_box">
        <h2>HTML代码
          <el-button class="btn" v-clipboard:copy="htmlValue"
          v-clipboard:success="copySuccess"
          v-clipboard:error="copyError">复制</el-button>

        </h2>
        <div class="view">
          {{htmlValue}}
        </div>
      </div>
      <div class="html_box">
        <h2>JS代码
          <el-button class="btn" v-clipboard:copy="jsValue"
          v-clipboard:success="copySuccess"
          v-clipboard:error="copyError">复制</el-button>

        </h2>
        <div class="view">
          {{jsValue}}
        </div>
      </div>
    </div>
    <div class="left_config">
      <div class="btn_list">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addItem">新增表单项</el-button>
        <el-button type="danger" size="small" icon="el-icon-delete" @click="delItem">删除</el-button>
        <el-button type="primary" size="small" @click="saveItem">保存</el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane v-for="(item,index) in configList" :key="index" :label="'表单第'+(index+1)+'项'" :name="index+''"></el-tab-pane>
      </el-tabs>
      <elme-form
        :formData="configForm"
        :formValue="configList[activeName]"
        :formButton="null"
        size="small" 
      />
      <div class="option_list" v-if="getType(activeConfig.type)">
        <div class="title">可选值
          <el-button type="primary" size="small" icon="el-icon-plus" @click="addOptions"></el-button>
        </div>
        <div class="option_table">
          <div class="option_row option_title">
            <div class="option_cell">label</div>
            <div class="option_cell">value</div>
            <div class="option_btn">操作</div>
          </div>
          <div class="option_row" v-for="(item,index) in options" :key="index">
            <div class="option_cell">
              <el-input size="mini" v-model="item.label" placeholder="请输入label" />
            </div>
            <div class="option_cell">
              <el-input size="mini" v-model="item.value" placeholder="请输入value" />
            </div>
            <div class="option_btn">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="delOptions(index)"></el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="form_view">
      <elme-form
        :formData="viewForm"
        :formValue="viewValue"
        :formButton="null"
        :size="formConfigValue.size"
        :labelPosition="formConfigValue.labelPosition"
        :formClass="formConfigValue.formClass"
        :formRef="formConfigValue.formRef"
        :labelCol="formConfigValue.labelCol?formConfigValue.labelCol:'100px'"
      />
    </div>
  </div>
</template>

<script>
import elmeForm from "@/components/form";

export default {
  name: "sample_form",
  components: {
    elmeForm
  },
  data() {
    return {
      formConfig:[
        {
          type: "input",
          label: "输入框的大小",
          width: "100%",
          prop: "size",
          placeholder:'不填默认为default'
        },
        {
          type: "input",
          label: "文字区的宽度",
          width: "100%",
          prop: "labelCol",
          placeholder:'不填默认为100px'
        },
        {
          type: "input",
          label: "标签的位置",
          width: "100%",
          prop: "labelPosition",
          placeholder:'不填默认为right'
        },
        {
          type: "input",
          label: "form表单的class",
          width: "100%",
          prop: "formClass"
        },
        {
          type: "input",
          label: "表单ref",
          width: "100%",
          prop: "formRef",
          placeholder:'不填默认为formRef'
        },
      ],
      formConfigValue:{
        size:'',
        labelPosition:'',
        formClass:'',
        formRef:'',
        labelCol:'',
      },
      configForm:[
        {
          type: "select",
          label: "表单项类型",
          width: "100%",
          prop: "type",
          options:[
            {
              label:'普通输入框',
              value:'input'
            },
            {
              label:'密码输入框',
              value:'password'
            },
            {
              label:'文本框',
              value:'textarea'
            },
            {
              label:'下拉选择框',
              value:'select'
            },
            {
              label:'时间选择器',
              value:'time'
            },
            {
              label:'日、月选择器',
              value:'date'
            },
            {
              label:'时间范围选择器',
              value:'timeRegion'
            },
            {
              label:'多选框',
              value:'checkbox'
            },
            {
              label:'单选框',
              value:'radio'
            },
            {
              label:'评分框',
              value:'rate'
            },
            {
              label:'层级联动选择器',
              value:'cascader'
            },
            {
              label:'上传框',
              value:'upload'
            }
          ]
        },
        {
          type: "input",
          label: "表单项名称",
          width: "100%",
          prop: "label",
        },
        {
          type: "input",
          label: "表单项字段",
          width: "100%",
          prop: "prop",
        },
        {
          type: "input",
          label: "表单项宽度",
          width: "100%",
          placeholder:'默认不填为50%',
          prop: "width",
        },
        {
          type: "input",
          label: "输入框宽度",
          width: "100%",
          placeholder:'默认不填为85%',
          prop: "wrapWidth",
        },
        {
          type: "select",
          label: "是否禁用",
          width: "100%",
          prop: "disabled",
          placeholder:'默认不选为否',
          options:[
            {
              label:'是',
              value:true
            },
            {
              label:'否',
              value:false
            }
          ]
        },
        {
          type: "select",
          label: "是否隐藏",
          width: "100%",
          placeholder:'默认不选为否',
          prop: "hide",
          options:[
            {
              label:'是',
              value:true
            },
            {
              label:'否',
              value:false
            }
          ]
        },
        {
          type: "input",
          label: "最大长度",
          width: "100%",
          placeholder:'默认不填为30',
          prop: "maxLength",
          hide:true
        },
        {
          type: "input",
          label: "文本提示",
          placeholder:'默认不填为请输入XXX',
          width: "100%",
          prop: "placeholder",
          hide:true
        },
        {
          type: "select",
          label: "是否多选",
          width: "100%",
          placeholder:'默认不选为否',
          prop: "multiple",
          options:[
            {
              label:'是',
              value:true
            },
            {
              label:'否',
              value:false
            }
          ],
          hide:true
        },
        {
          type: "select",
          label: "是否可搜索",
          width: "100%",
          placeholder:'默认不选为否',
          prop: "filterable",
          options:[
            {
              label:'是',
              value:true
            },
            {
              label:'否',
              value:false
            }
          ],
          hide:true
        },
      ],
      activeConfig:{},
      configList:[],
      activeName:'0',
      viewForm:[],
      viewValue:{},
      options:[],
      htmlValue:'',
      jsValue:'',
    };
  },
  created(){
    this.addItem()
    // this.activeConfig = this.configList[0]
  },
  methods: {
    reFreshed(){
    },
    addItem(){
      let index = this.configList.push({
        type:'',
        label:'',
        prop:'',
        width:'',
        wrapWidth:'',
        disabled:'',
        hide:'',
        maxLength:'',
        placeholder:'',
        multiple:'',
        filterable:'',
      })-1
      // console.log(a,'============');
      this.activeName = index+''
      this.activeConfig = this.configList[index]
    },
    generateFun(){
      let htmlValue = '<elme-form :formData="viewForm" :formValue="viewValue" :formButton="null"'
      let jsValue = {
        viewForm:this.viewForm,
        formValue:this.viewValue,
      }
      if (this.formConfigValue.size) {
        htmlValue += ` :size="${this.formConfigValue.size}"`
        jsValue['size'] = this.formConfigValue.size
      }
      if (this.formConfigValue.labelPosition) {
        htmlValue += ` :labelPosition="${this.formConfigValue.labelPosition}"`
        jsValue['labelPosition'] = this.formConfigValue.labelPosition
      }
      if (this.formConfigValue.formClass) {
        htmlValue += ` :formClass="${this.formConfigValue.formClass}"`
        jsValue['formClass'] = this.formConfigValue.formClass
      }
      if (this.formConfigValue.formRef) {
        htmlValue += ` :formRef="${this.formConfigValue.formRef}"`
        jsValue['formRef'] = this.formConfigValue.formRef
      }
      if (this.formConfigValue.labelCol) {
        htmlValue += ` :labelCol="${this.formConfigValue.labelCol}"`
        jsValue['labelCol'] = this.formConfigValue.labelCol
      }
      this.htmlValue = htmlValue+' />'
      this.jsValue = JSON.stringify(jsValue)
    },
    copySuccess(){
      this.$message.success('复制成功')
    },
    copyError(){
      this.$message.error('复制失败，换个姿势试试？')
    },
    tabClick(){
      // console.log(this.activeName,'============');
      let index = this.activeName
      this.activeConfig = this.configList[index]
    },
    saveItem(){
      let obj = {}
      Object.keys(this.activeConfig).forEach(item=>this.activeConfig[item]?obj[item]=this.activeConfig[item]:'')
      switch (this.activeConfig.type) {
        case 'select':
        case 'checkbox':
        case 'radio':
          obj['options'] = this.options
      }
      if (this.configList.length>this.viewForm.length) {
        this.viewForm.push(obj)
        this.viewValue[obj.prop] = ''
      }else{
        this.viewForm.splice(this.activeName*1,1,obj)
      }
    },
    delItem(){
      if (this.configList.length>1) {
        this.configList.splice(this.activeName*1,1)
        let obj = this.viewForm.splice(this.activeName*1,1)
        delete this.viewValue[obj.prop]
        this.activeName*1>0?this.activeName=this.activeName-1+'':this.activeName='0'
      }else{
        this.$message.error('最后一项不能删除哦')
      }
    },
    addOptions(){
      this.options.push({
        label:'',value:''
      })
    },
    delOptions(index){
      this.options.splice(index,1)
    },
    getType(type){
      switch (type) {
        case 'select':
        case 'checkbox':
        case 'radio':
          return true
      }
      return false
    }
  },
  watch:{
    activeConfig:{
      deep:true,
      handler:function(){
        // input,textarea,password,select,time,timeRegion,checkbox,radio,cascader,upload,rate,date
        // 0:表单项类型
        // 1:表单项名称
        // 2:表单项字段
        // 3:表单项宽度
        // 4:输入框宽度
        // 5:是否禁用
        // 6:是否隐藏
        // 0-6为通用属性

        // 7:最大长度:upload,rate,timeRegion,checkbox,radio,select,time,cascader,date
        // 8:文本提示:upload,rate,timeRegion,checkbox,radio
        // 9:是否多选:select
        // 10:是否可搜索:select
        // 10:表单项类型
        // 11:表单项类型
        // 12:表单项类型
        this.configForm[7].hide = true
        this.configForm[8].hide = true
        this.configForm[9].hide = true
        this.configForm[10].hide = true
        if (this.activeConfig.type=='select') {
          this.configForm[8].hide = false
          this.configForm[9].hide = false
          this.configForm[10].hide = false
        }else if (this.activeConfig.type=='time') {
          this.configForm[8].hide = false
        }else if (this.activeConfig.type=='cascader') {
          this.configForm[8].hide = false
        }else if (this.activeConfig.type=='date') {
          this.configForm[8].hide = false
        }else if (this.activeConfig.type=='textarea') {
          this.configForm[7].hide = false
          this.configForm[8].hide = false
        }else if (this.activeConfig.type=='input'||this.activeConfig.type=='password') {
          this.configForm[7].hide = false
          this.configForm[8].hide = false
        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.sample_form {
  min-width: 900px;
  display: flex;
  height: 100%;
  .form_config{
    margin-right: 20px;
    h2{
      font-size: 14px;
      padding-left: 10px;
      position: relative;
      font-weight: normal;
      &::before{
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        border-radius: 2px;
        overflow: hidden;
        height: 16px;
        background: #409EFF;
      }
    }
    .generate_btn{
      p{
        margin-top: 10px;
        color: #6c6c6c;
      }
    }
    .html_box{
      margin-top: 16px;
      width: 100%;
      border: 1px dashed #eee;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      h2{
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .view{
        background: #eee;
        border-radius: 5px;
        padding: 10px;
        
      }
    }
  }
  .left_config,.option_list,.form_config{
    max-height: 100%;
    overflow-y: auto;
    width: 25%;
    border: 1px dashed #eee;
    border-radius: 5px;
    padding: 10px;
  }
  .form_view{
    width: 30%;
    border: 1px dashed #eee;
    border-radius: 5px;
    padding: 10px;
    margin-left: 20px;
  }
  .option_list{
    width: 100%;
    box-sizing: border-box;
    .title{
      font-size: 14px;
      color: #606266;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .option_title{
      background: #f7f7f7;
      color: #909399;
      font-size: 14px;
      padding: 5px 0;
    }
    .option_row{
      border-bottom: 1px solid #ebeef5;
      display: flex;
      .option_btn{
        width: 70px;
        text-align: center;
        padding: 5px;
      }
      .option_cell{
        flex: 1;
        padding: 5px;
      }
    }
  }
}
</style>